<!-- 入驻申请 -->
<template>
  <div class="app-container">
    <div class="app-form">
      <el-form
        ref="tablePage"
        :inline="true"
        :model="tablePage"
      >
        <el-form-item label="入驻企业名称" prop="name">
          <el-input v-model="tablePage.name" size="small" placeholder="请输入" clearable @keyup.enter.native="screening" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="tablePage.phone" size="small" placeholder="请输入" clearable @keyup.enter.native="screening" />
        </el-form-item>
        <el-form-item label="联系人" prop="username">
          <el-input v-model="tablePage.username" size="small" placeholder="请输入" clearable @keyup.enter.native="screening" />
        </el-form-item>
        <el-form-item style="margin-left:25px;">
          <el-button type="primary" size="small" @click="screening">查询</el-button>
          <el-button type="default" size="small" @click="reset('tablePage')">重置</el-button>
          <el-button v-show="isShowDel" type="danger" size="small" @click="delAll">删除</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格部分 须放在mytablebox盒子下面自定义样式才有效果 -->
      <div class="mytablebox">
        <vxe-table
          ref="xTable"
          align="center"
          :round="true"
          :data="tableData"
          height="100%"
          :export-config="{}"
          header-row-class-name="headerName"
          :show-header-overflow="true"
          @checkbox-all="selectAllEvent"
          @checkbox-change="selectChangeEvent"
        >
          <vxe-table-column type="checkbox" width="60" fixed="left" />
          <vxe-table-column field="name" title="入驻企业名称" show-overflow />
          <vxe-table-column field="area" title="所需办公面积" show-overflow />
          <vxe-table-column field="inDate" title="申请入驻日期" show-overflow />
          <vxe-table-column field="phone" title="联系电话" show-overflow />
          <vxe-table-column field="username" title="姓名" show-overflow />
          <vxe-table-column field="applyStatus" title="审批状态" show-overflow />
          <vxe-table-column title="操作" width="200" fixed="right">
            <template v-slot="{ row }">
              <vxe-button status="primary" content="编辑" @click="update(row)" />
              <vxe-button status="danger" content="删除" @click="delOne(row.id)" />
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
      <!-- 分页部分 -->
      <vxe-pager
        :current-page="tablePage.page"
        :page-size="tablePage.limit"
        :total="tablePage.total"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']"
        @page-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      dialogVisible: false,
      tablePage: {
        page: 1,
        limit: 10,
        total: 0,
        name: null,
        phone: null,
        username: null
      },
      // 表格内数据
      tableData: [
      ],
      // 选中数据
      records: [],
      isShowDel: false
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    init() {

    },
    // 筛选
    screening() {
      this.tablePage.page = 1
      this.init()
    },
    // 重置
    reset(formName) {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
    },
    // 删除
    delAll() {
      this.$confirm('此操作将永久删除选中数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.records = []
        this.$refs.xTable.clearCheckboxRow()
        this.isShowDel = false
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.records = []
        this.$refs.xTable.clearCheckboxRow()
        this.isShowDel = false
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 表格全选事件
    selectAllEvent({ records, checked }) {
      this.records = records
      if (checked) this.isShowDel = true
      else this.isShowDel = false
    },
    // 表格单行选择事件
    selectChangeEvent({ records, checked }) {
      this.records = records
      if (checked) this.isShowDel = true
      else this.isShowDel = false
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.page = currentPage
      this.tablePage.limit = pageSize
      this.init()
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.app-container{
  display: flex;
}
</style>
